DHTMLX Documentation

Replacing ExtJS Grid with dhtmlxGrid

Download library

There are two main approaches to replace ExtJS grid with dhtmlxgrid:

Replacing ExtJS grid;
Using dhtmlxgrid in parallel with the Ext.grid.

Replacing ExtJS grid

a) Include all the necessary files and set path to grid images folder:

<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css" />
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/ext_integration/ext_blue.css" />
<script type="text/javascript" src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script type="text/javascript" src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script>
dhx_image_path="../../../dhtmlxGrid/codebase/imgs/";
</script>

b) Include intervention script:

<script src="../../../../main/dhtmlxgrid/codebase/ext_integration/dhtmlxgrid_extx.js"></script>

c) Replace ExtJs GridPanel with dhtmlxgrid:

<script>
Ext.grid.GridPanel=Ext.grid.dhxGridPanel;
</script>

Basically this is all, now all instances of Ext.grid.GridPanel will use dhtmlxgrid as rendering engine. The component understands ExtJS style of grid configuration, and can use ExtJS DataStore as the source of data:

var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:350,
        width:600,

        title:'Array Grid'
    });

Using dhtmlxgrid in parallel with the Ext.grid

Just repeat the steps a-b mentioned above, but instead of replacing just use dhxGridPanel where necessary:

var grid = new Ext.grid.dhxGridPanel({
        store: store,
        columns: [
            {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height:350,
        width:600,

        title:'Array Grid'
    });

The following two possibilities will work for both the above mentioned approaches:

Using native API of dhtmlxgrid;
Including dhtmlxgrid in ExtJs layout.

Using native API of dhtmlxgrid

You should repeat the steps a-b mentioned above, and instead of ExtJS's you can use native dhtmlxgrid style of initialization:

var panel=new Ext.grid.dhxGridPanel({    //define panel
        height:350,
        title:'Some Grid'
    });
    panel.render('grid-example');               //render panel
    var grid=panel.grid;                        //take grid instance

    grid.setHeader("Name,Index,Code");
    grid.setInitWidths("150,150,*")
    grid.setColAlign("left,left,right")
    grid.setColTypes("ro,ro,ro");
    grid.init();
    grid.enableSmartRendering(true);
    // loading 50000 rows dataset
    grid.loadXML("../../../../main/dhtmlxgrid/samples/!!loading_big_datasets/50000_load_grid.php?un="+Date.parse(new Date()));

Including dhtmlxgrid in ExtJs layout

If the grid is created through dhxGridPanel, there is no need in any additional steps because dhtmlxgrid will support all layout behaviors:

    new Ext.TabPanel({
            region:'center',
            deferredRender:false,
            activeTab:0,
            items:[new Ext.grid.dhxGridPanel({
                    store: new Ext.data.Store({
                        reader: new Ext.data.ArrayReader({}, [
                        {name: 'company'},
                        {name: 'price', type: 'float'},
                        {name: 'change', type: 'float'},
                        {name: 'pctChange', type: 'float'},
                        {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
                    ]),
                    data: [
                        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
                        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],